import 'package:flutter/material.dart';

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffededed),
      appBar: AppBar(
        backgroundColor: Color(0xffffffff),
        elevation: 0,
      ),
      body: ListView(
        children: [
          UserInfo(),
          Container(
            margin: EdgeInsets.only(top: 8),
            child: MenuItem(
              name: '支付',
              icon: Icon(Icons.payment),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 8),
            child: MenuItem(
              name: '支付',
              icon: Icon(Icons.payment),
            ),
          ),
          MenuItem(
            name: '收藏',
            icon: Icon(Icons.payment),
          ),
          MenuItem(
            name: '朋友圈',
            icon: Icon(Icons.payment),
          ),
          MenuItem(
            name: '卡包',
            icon: Icon(Icons.payment),
          ),
          MenuItem(
            name: '表情',
            icon: Icon(Icons.payment),
          ),
          Container(
            margin: EdgeInsets.only(top: 8),
            child: MenuItem(
              name: '设置',
              icon: Icon(Icons.payment),
            ),
          ),
        ],
      ),
    );
  }
}

class UserInfo extends StatefulWidget {
  const UserInfo({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return UserInfoState();
  }
}

class MenuItem extends StatelessWidget {
  String name;
  Widget icon;

  MenuItem({required this.name, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Ink(
      color: Colors.white,
      child: InkWell(
        onTap: () {},
        child: Container(
          padding: EdgeInsets.only(left: 16, right: 16),
          height: 50,
          child: Row(
            children: [
              Container(
                child: icon,
                margin: EdgeInsets.only(right: 16),
              ),
              Expanded(
                child: Text(name),
              ),
              Icon(
                Icons.arrow_forward_ios_rounded,
                size: 16,
                color: Color(0xffb7b7b7),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class UserInfoState extends State<UserInfo> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 24, right: 12, bottom: 28),
      color: Color(0xffffffff),
      child: Row(
        children: [
          /// 头像
          Container(
            width: 58,
            height: 58,
            margin: EdgeInsets.only(right: 16),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(4),
              ),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                  'https://images.pexels.com/photos/8783490/pexels-photo-8783490.jpeg?auto=compress&cs=tinysrgb&dpr=1&h=140&w=140',
                ),
              ),
            ),
          ),
          // 用户信息
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 用户名称
                Container(
                  child: Text(
                    "超甜",
                    style: TextStyle(
                      fontSize: 20,
                    ),
                  ),
                ),
                Row(
                  children: [
                    Expanded(
                      child: DefaultTextStyle(
                        style: TextStyle(
                          fontSize: 16,
                          color: Color(0xff707070),
                        ),
                        child: Row(
                          children: [
                            Text('微信号:'),
                            Container(
                              margin: EdgeInsets.only(left: 10),
                              child: Text('yxsgxml'),
                            ),
                          ],
                        ),
                      ),
                    ),
                    Icon(
                      Icons.qr_code_2_outlined,
                      color: Color(0xff9a9a9a),
                      size: 20,
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 10),
                      child: Icon(
                        Icons.arrow_forward_ios_rounded,
                        color: Color(0xff9a9a9a),
                        size: 16,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
